<script setup lang='ts'>
defineOptions({ name: 'AppSportsPageSportLeagueEventList' })
const props = defineProps<{ si: number, ci: string }>()

const route = useRoute()
const { competitionListData } = storeToRefs(useSportsStore())

const leagueName = computed(() => route.query.cn?.toString() ?? '')
// 动态获取icon,如果跳转源没有从全局联赛列表获取，再没有就算了
const icon = computed(() => route.query.icon?.toString())
const leagueIcon = computed(() => {
  if (icon.value)
    return icon.value
  if (competitionListData.value && competitionListData.value.list && competitionListData.value.list.length > 0) {
    const obj = competitionListData.value.list.find((a) => a.cl.find((b) => b.ci === props.ci))
    if (obj)
      return obj.ppic
    return ''
  }
  return ''
})

let timer: any = null
const page = ref(1)
const pageSize = ref(9)
const total = ref(0)
const list = ref<ISportEventInfo[]>([])
const params = computed(() => {
  return {
    m: 5,
    ic: 0,
    ivs: 0,
    si: props.si,
    ci: props.ci,
    page: page.value,
    page_size: pageSize.value,
  }
})
const { run, runAsync } = useRequest(ApiSportEventList, {
  onSuccess(res) {
    if (res.d) {
      total.value = res.t
      list.value = res.d
    }
    else {
      total.value = 0
      list.value = []
    }
  }
})
/** 👷 分页、定时器、监听更新数据 start 👷 */
function startTimer() {
  stopTimer()
  timer = setInterval(() => {
    run(params.value)
  }, 120000)
}
function stopTimer() {
  if (timer !== null) {
    clearInterval(timer)
    timer = null
  }
}
function getData() {
  run(params.value)
}
function prePage() {
  page.value = page.value - 1
  getData()
}
function nextPage() {
  page.value = page.value + 1
  getData()
}
function reset() {
  page.value = 1
  total.value = 0
}
function updateDataByMqtt(data: ISportEventList[]) {
  list.value = sportsEventInfoListUpdateByMqtt(list.value, data)
}
/** 🚧 分页、定时器、监听更新数据 end 🚧 */

watch(() => props.ci, () => {
  reset()
  getData()
  startTimer()
})

onActivated(() => {
  startTimer()
  appEventBus.on(EventBusNames.SPORTS_DATA_CHANGE_BUS, updateDataByMqtt)
})
onDeactivated(() => {
  stopTimer()
  appEventBus.off(EventBusNames.SPORTS_DATA_CHANGE_BUS, updateDataByMqtt)
})
onBeforeUnmount(() => {
  stopTimer()
  appEventBus.off(EventBusNames.SPORTS_DATA_CHANGE_BUS, updateDataByMqtt)
})

await application.allSettled([runAsync(params.value)])
</script>

<template>
  <div class="my-[24px]">
    <div class="font-semibold mb-[16px] text-[var(--color-text-white-0)] flex items-center leading-[32px]">
      <div class="w-[24px] h-[24px] flex items-center mr-[12px] ml-[4px]">
        <AppImage :url="leagueIcon" :key="leagueIcon" is-network>
          <BaseIcon class="text-[24px]" name="uni-vector" />
        </AppImage>
      </div>
      <span class="text-[20px]">{{ leagueName }}</span>
    </div>

    <div>
      <div class="grid gap-[16px]">
        <div class="min-w-0" v-for="event in list" :key="event.ei">
          <AppSportsMarketInfo :data="event" />
        </div>
      </div>
      <AppSportsPagination v-if="total > pageSize" @previous="prePage" @next="nextPage" :total="total" :page="page"
        :page-size="pageSize" class="mt-[16px]" />
    </div>
  </div>
</template>

<style lang='scss' scoped></style>
